<template>
  <div class="home-main-bg">
    <!-- 顶部大横幅 -->
    <div class="hero-banner">
      <el-carousel height="420px" indicator-position="outside">
        <el-carousel-item v-for="(url, idx) in urls" :key="idx">
          <img :src="url" alt="banner" class="hero-img" />
        </el-carousel-item>
      </el-carousel>
      <div class="banner-slogan">
        <div class="slogan-title">英雄联盟皮肤网站</div>
        <div class="slogan-desc">发现你的专属皮肤，点燃召唤师峡谷激情！</div>
      </div>
    </div>

    <!-- 公告信息流 -->
    <div class="notice-flow">
      <div class="notice-flow-title">
        <i class="el-icon-bell"></i> 最新公告
      </div>
      <div class="notice-flow-list">
        <el-timeline>
          <el-timeline-item
            v-for="item in tableData"
            :key="item.id"
            :timestamp="item.time"
            placement="top"
            color="#409EFF"
          >
            <div class="notice-flow-item">
              <div class="notice-flow-item-title">{{ item.name }}</div>
              <div class="notice-flow-item-content">{{ item.content }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <!-- 品牌/底部区 -->
    <div class="footer-brand">
      <img src="@/assets/logo.png" class="footer-logo" alt="logo" />
      <div class="footer-brand-title">LOL SKIN STORE</div>
      <div class="footer-brand-desc">© 2025 英雄联盟皮肤网站 | Choose Your Own Future</div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      urls: [
        require('@/assets/hero1.png'),
        require('@/assets/hero2.png'),
        require('@/assets/hero3.png'),
        require('@/assets/hero4.png')
      ],
      params: {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 8,
      },
      tableData: [],
      total: 0,
    }
  },
  created() {
    this.findBySearch()
  },
  methods: {
    findBySearch(){
      request.get("/notice/search", {
        params: this.params
      }).then(res =>{
        if(res.code === '0'){
          this.tableData = res.data.list
          this.total = res.data.total;
        }
      })
    }
  }
}
</script>

<style scoped>
.home-main-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #232f3e 0%, #409EFF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px;
}
.hero-banner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  margin-top: 38px;
}
.hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 22px;
  filter: brightness(0.92);
}
.banner-slogan {
  position: absolute;
  left: 48px;
  top: 60px;
  color: #fff;
  z-index: 2;
  text-shadow: 0 4px 24px #232f3e, 0 1px 0 #409EFF;
  user-select: none;
}
.slogan-title {
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 16px;
  line-height: 1.1;
}
.slogan-desc {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 0.93;
}
.notice-flow {
  width: 100%;
  max-width: 900px;
  margin: 48px auto 0 auto;
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  padding: 32px 36px 18px 36px;
}
.notice-flow-title {
  font-size: 26px;
  color: #232f3e;
  font-weight: bold;
  margin-bottom: 18px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notice-flow-list {
  margin-left: 8px;
}
.notice-flow-item-title {
  font-size: 18px;
  color: #409EFF;
  font-weight: 600;
  margin-bottom: 6px;
}
.notice-flow-item-content {
  font-size: 15px;
  color: #444;
  line-height: 1.7;
  word-break: break-all;
}
.footer-brand {
  margin-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.93;
}
.footer-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  box-shadow: 0 2px 8px #e6e6e6;
  background: #fff;
}
.footer-brand-title {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 4px;
}
.footer-brand-desc {
  color: #eee;
  font-size: 13px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
@media (max-width: 900px) {
  .hero-banner, .notice-flow {
    max-width: 100%;
    border-radius: 0;
    margin-top: 0;
    padding: 0 2vw;
  }
  .hero-img {
    height: 200px;
    border-radius: 0;
  }
  .banner-slogan {
    left: 18px;
    top: 18px;
  }
  .slogan-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .slogan-desc {
    font-size: 13px;
  }
  .notice-flow {
    padding: 18px 4vw 8px 4vw;
  }
  .footer-logo {
    width: 36px;
    height: 36px;
  }
  .footer-brand-title {
    font-size: 15px;
  }
}
</style>